<template>
	<view class="container">
		<view class="top">
			<u--image :src="imgUrl" shape="circle" width="50" height="50"></u--image>
			<view>
				<text class="title">{{foodName}}</text>
			</view>
		</view>

		<view class="main">
			<view class="main-top">
				<view class="title">
					热量和营养成分
				</view>
				<view class="subheading">
					每100克
				</view>
			</view>
			<view class="main-body">
				<view class="main-body-left">
					<view class="subheading">
						热量：
					</view>
					<view style="text-align: center;">
						{{detail.energy}}
					</view>
				</view>
				<view style="width: 1px;background-color: #f5f6fa;height: 100%;">
				</view>
				<view class="main-body-right">
					<view class="subheading">
						供能比:
					</view>
					<view v-for="(item,index) in heatRatio" :key="index" class="line-progress">
						<view class="">
							{{item.title}}
						</view>
						<u-line-progress :percentage="item.data" activeColor="#19be6b"></u-line-progress>
					</view>
				</view>
			</view>
			<!-- 营养表 -->
			<view class="table" style="width: 100%;">
				<!-- 表头 -->
				<view class="table-th" style="width: 100%;">
					<text>营养元素</text>
					<text>含量</text>
				</view>
				<u-line></u-line>
				<!-- 数据行 -->
				<view style="width: 100%;" v-for="(item,index) in arr" :key="index">
					<view style="width: 100%;" class="table-td">
						<view>{{item.title}}</view>
						<view>{{item.data}}</view>
					</view>
					<u-line></u-line>
				</view>
				</uni-table>
			</view>
		</view>
		<view style="height: 50rpx;margin-left: 20rpx;margin-right: 20rpx;">
			
		</view>
	</view>
</template>

<script>
	import {
		foodDetailByFoodId
	} from '@/config/api.js'
	export default {
		data() {
			return {
				id: '',
				foodName: '',
				imgUrl: '',
				detail: {},
				heatRatio: [],
				arr: []
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.foodName = option.foodName;
			this.imgUrl = option.imgUrl;
			uni.setNavigationBarTitle({
				title: this.foodName
			});
			this.LoadFoodDetail(this.id);
		},
		methods: {
			/**
			 * @param {Object} foodId
			 * 加载食物详情数据
			 */
			async LoadFoodDetail(foodId) {
				const data = await foodDetailByFoodId(foodId);
				if (data.code == 200) {
					this.detail = data.data;
					this.dataConversion(data.data);
					this.ObjectToArray(data.data);
					console.log(this.detail);
				}
			},
			/**
			 * @param {Object} data
			 * 计算供能比
			 */
			dataConversion(data) {
				let protein = data.protein != null ? data.protein.slice(0, data.protein.length - 1) * 4 : 0; // 蛋白质
				let fat = data.fat != null ? data.fat.slice(0, data.fat.length - 1) * 9 : 0; // 脂肪
				let carbohydrate = data.carbohydrate != null ? data.carbohydrate.slice(0, data.carbohydrate.length - 1) *
					4 : 0; // 碳水
				let sum = protein + fat + carbohydrate;
				this.heatRatio.push({
					title: '蛋白',
					data: Math.floor((protein / sum) * 100)
				});
				this.heatRatio.push({
					title: '脂肪',
					data: Math.floor((fat / sum) * 100)
				});
				this.heatRatio.push({
					title: '碳水',
					data: Math.floor((carbohydrate / sum) * 100)
				});
				console.log(this.heatRatio);
			},
			ObjectToArray(data) {
				for (let key in data) {
					if (data[key] == null) {
						data[key] = '×';
					}
				};
				this.arr.push({
					title: '蛋白质',
					data: data.protein
				});
				this.arr.push({
					title: '脂肪',
					data: data.fat
				});
				this.arr.push({
					title: '碳水化合物',
					data: data.carbohydrate
				});
				this.arr.push({
					title: '水分',
					data: data.waterContent
				});
				this.arr.push({
					title: '膳食纤维',
					data: data.dietaryFiber
				});
				this.arr.push({
					title: '胆固醇',
					data: data.cholesterol
				});
				this.arr.push({
					title: '灰分',
					data: data.ashContent
				});
				this.arr.push({
					title: '钙',
					data: data.calcium
				});
				this.arr.push({
					title: '磷',
					data: data.phosphorus
				});
				this.arr.push({
					title: '钾',
					data: data.potassium
				});
				this.arr.push({
					title: '钠',
					data: data.sodium
				});
				this.arr.push({
					title: '镁',
					data: data.magnesium
				});
				this.arr.push({
					title: '铁',
					data: data.iron
				});
				this.arr.push({
					title: '锌',
					data: data.zinc
				});
				this.arr.push({
					title: '硒',
					data: data.selenium
				});
				this.arr.push({
					title: '铜',
					data: data.copper
				});
				this.arr.push({
					title: '锰',
					data: data.manganese
				});
				this.arr.push({
					title: '碘',
					data: data.iodine
				});
				this.arr.push({
					title: '总维生素A',
					data: data.totalVitaminA
				});
				this.arr.push({
					title: '视黄醇',
					data: data.retinol
				});
				this.arr.push({
					title: '胡萝卜素',
					data: data.carotenes
				});
				this.arr.push({
					title: '维生素D',
					data: data.vd
				});
				this.arr.push({
					title: '维生素E',
					data: data.ve
				});
				this.arr.push({
					title: '维生素K',
					data: data.vk
				});
				this.arr.push({
					title: '维生素B1(硫胺素)',
					data: data.vb1
				});
				this.arr.push({
					title: '维生素B2(核黄素)',
					data: data.vb2
				});
				this.arr.push({
					title: '维生素B6',
					data: data.vb6
				});
				this.arr.push({
					title: '维生素B12',
					data: data.vb12
				});
				this.arr.push({
					title: '烟酸',
					data: data.nicotinicAcid
				});
				this.arr.push({
					title: '叶酸',
					data: data.folicAcid
				});
				this.arr.push({
					title: '胆碱',
					data: data.choline
				});
				this.arr.push({
					title: '生物素',
					data: data.biotin
				});
				this.arr.push({
					title: '泛酸',
					data: data.pantothenate
				});

			}
		}
	}
</script>

<style lang="scss" scoped>
	page {}

	.container {
		width: 100%;
		background-color: #f4f5f9;
	}

	.top {
		background-color: #ffffff;
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;

		.title {
			font-size: 35rpx;
			margin-left: 20rpx;
		}
	}

	.main {
		margin: 40rpx;
		border-radius: 20rpx;
		padding: 20rpx;
		background-color: #ffffff;

		.main-top {
			display: flex;
			justify-content: space-between;
		}

		.main-body {
			padding: 20rpx;
			background-color: #f5f6fa;
			border-radius: 20rpx;
			display: flex;
			flex-direction: row;

			.main-body-left {
				width: 30%;
			}

			.main-body-right {
				width: 70%;

				.line-progress {
					display: flex;
					flex-direction: row;
					align-items: center;
				}
			}
		}
	}

	.subheading {
		color: #bfc3cf;
		font-size: 20rpx;
	}

	.table {
		.table-th {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			color: #b0b4c2;
			margin-top: 20rpx;
			margin-bottom: 10rpx;
		}

		.table-td {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-top: 10rpx;
			margin-bottom: 10rpx;
		}
	}
</style>
